<!--  -->
<template>
  <div class="home">
    <!-- <zhihuHeader :day="day" :month="month" /> -->
    <!-- <zhihu-banner :bannerData="bannerData" /> -->
    <div class="submit">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        >
        <el-form-item label="账号：" prop="age">
          <el-input v-model.number="ruleForm.age"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="pass">
          <el-input
            v-model="ruleForm.pass"
            type="password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码： " prop="checkPass">
          <el-input
            v-model="ruleForm.checkPass"
            type="password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">登陆</el-button>
          <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts">
import zhihuHeader from '../components/Header.vue'
import zhihuBanner from '../components/Banner.vue'
import {ref,reactive,toRefs,computed, onBeforeMount} from 'vue'
import utils from "../utils";
import { getBannerList } from '../api/index'
import router from '../router';

import {getCurrentInstance} from 'vue'

export default {
  components:{
    zhihuHeader,
    zhihuBanner
  },

  setup() {
    const ruleFormRef = ref(null)
    const state = reactive({
      date:new Date(),
      bannerData: [],
      rules:{
        pass: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        checkPass: [{ required: true, message: '请确认密码', trigger: 'blur' }],
        age: [{ required: true, message: '请输入账号', trigger: 'blur' }],
      },
      ruleForm: {
        pass: '',
        checkPass: '',
        age: null
      }
    })
    
    let day = computed(()=> utils.formatTime(state.date)[2])
    let month = computed(() => utils.formatTime(state.date)[1]);
    const getBannerData = async () => {
      const res = await getBannerList({id: 1})
      console.log('res: ', res)
      state.bannerData = res.data.data
    }
        
    onBeforeMount(() => {
      getBannerData()
    })

    const proxy_ = getCurrentInstance()
    // 确认
    const submitForm = (()=>{
      ruleFormRef.value.validate((valid) => {
        if(valid){
          router.push({path: 'home'})
        }else{
          console.log('11')
        }
      })
      
    })
    // 取消
    const resetForm=(()=>{
      console.log('reset')
    })
    return {
      ...toRefs(state),
      day,
      month,
      submitForm,
      resetForm,
      ruleFormRef
    }
  }, 
};
</script>
<style lang='scss' scoped>
.home {
  widows: 100%;
  width: 100%;
  // height: 100%;
  min-height: 100vh;
  background-image: url('/@/assets/image/login_bg.jpg');
  background-size: cover;
  display: flex;
  align-items: center;
  .submit{
    padding: 30px 50px;
    width: 30%;
    margin: auto;
  }
}
</style>